<template>
  <n-card :bordered="false" class="proCard">
    <QueryForm v-model="queryForm" @submit="reloadTable">
      <template #default="{ queryForm }">
        <n-form-item label="所属系统">
          <!--          <n-input v-model:value="queryForm['resourceAppCode']" placeholder="请输入接口编码" />-->
          <n-select style="width: 200px" v-model:value="queryForm['resourceAppCode']" clearable
                    :options="appListOptions" />
        </n-form-item>
        <n-form-item label="接口名称">
          <n-input clearable v-model:value="queryForm['searchKey']" placeholder="接口名称、地址、编码" />
        </n-form-item>
      </template>

    </QueryForm>
    <BasicTable
      :columns="selectApiColumns"
      v-model:checked-row-keys="checkedRows"
      :page-spread="true"
      :request="loadDataTable"
      :row-key="(row) => row.id"
      ref="tableRef"
      :scroll-x="1090"
    >
      <template #tableTitle>
      </template>
      <template #toolbar>
      </template>
    </BasicTable>

  </n-card>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { BasicTable } from "@/components/Table";
import httpApi from "../httpApi";
import { QueryForm } from "@/components/QueryForm/index";
import {
  doDeleteModal,
  doImportFromSwaggerModal,
  doSaveModal,
  doUpdateModal,
  enabledOptions,
  onCheckedRowEvent,
  queryForm,
  selectApiColumns,
  tableRef
} from "./Service";
import SlashAppContext from "@/context/SlashAppContext";
import { checkedRows } from "@/views/SysApp/Service";
import { asyncApi } from "@";
import SysAppApi from "@/views/SysResource/SysAppApi";

export default defineComponent(
  {
    name: "SelectResourceApiList",
    props: {
      checkedList: {
        default: []
      }
    },
    components: { BasicTable, QueryForm },
    setup(props, ctx) {
      const loadDataTable = async (res) => {
        console.log("表单参数:{}", queryForm.value);
        console.log("更新参数");
        checkedRows.value = [...props.checkedList];
        return await httpApi.selectSysTbResourcePageList({
          resourceType: "api",
          resourceAppCode: "",
          searchKey: "",
          ...res,
          ...queryForm.value
        });
      };
      const appListOptions: ref<any> = asyncApi(async () => {
        const msg = await SysAppApi.doSelectPageList({ pageSize: 50 } as any);
        console.log(msg);
        const result = msg.data.map(it => {
          return { value: it.appCode, label: it.appName };
        });
        console.log("返回数据", result);
        return result;
      })();

      async function doSubmit() {
        const reusltData = [...checkedRows.value];
        checkedRows.value = [];
        return {
          code: 200,
          data: reusltData
        };
      }

      function reloadTable() {
        tableRef.value.reload();
      }

      return {
        loadDataTable,
        checkedRows,
        reloadTable,
        doSubmit,
        selectApiColumns,
        onCheckedRowEvent,
        queryForm,
        tableRef,
        doSaveModal,
        doUpdateModal,
        doDeleteModal,
        enabledOptions,
        appListOptions,
        doImportFromSwaggerModal
      };
    }
  }
);


</script>

<style lang="less" scoped></style>
